<template>
  <div>
    <el-button class="add_button" type="primary" @click="showNoticeDialog">
      新增通知
    </el-button>
    
    <el-dialog
      :title="noticeForm.id == '' ? '新增通知' :'编辑通知'"
      :visible.sync="dialogVisible"
      width="width"
    >
      <el-form ref="noticeForm" :model="noticeForm" label-width="120px" :rules="noticeFormRules">
        <el-form-item label="主题" prop="title">
          <el-input v-model="noticeForm.title" type="text"></el-input>
        </el-form-item>
        <el-form-item label="简述" prop="description">
          <el-input v-model="noticeForm.description" type="text"></el-input>
        </el-form-item>
        <el-form-item label="详情" prop="detail">
          <el-input v-model="noticeForm.detail" type="textarea" :autosize="{ minRows: 2, maxRows: 4}"></el-input>
        </el-form-item>
        <el-form-item label="重要程度" prop="importance">
          <el-select v-model="noticeForm.importance">
            <el-option label="一般" value="0"></el-option>
            <el-option label="重要" value="1"></el-option>
          </el-select>
        </el-form-item>
      </el-form>
      <div slot="footer">
        <el-button @click="dialogVisible = false">取 消</el-button>
        <el-button type="primary" :loading="loading" @click="submitNoticeForm('noticeForm')">确 定</el-button>
      </div>
    </el-dialog>

    <el-table
      :data="noticeList"
      style="width: 100%"
      border
    >
      <template v-for="item in elTableColumns">
        <el-table-column
          :prop="item.prop"
          :label="item.label"
          align="center"
          :show-overflow-tooltip="true"
        >
        </el-table-column>
      </template>
      <el-table-column label="操作" align="center">
          <template slot-scope="scope">
            <el-button
              size="mini"
              @click="handleEdit(scope.$index, scope.row)">编辑</el-button>
            <el-popconfirm
              title="确认删除该通知？"
              @confirm="handleDelete(scope.$index, scope.row)"
            >
              <el-button
                size="mini"
                type="danger"
                slot="reference"
              >删除</el-button>
            </el-popconfirm>
          </template>
      </el-table-column>
    </el-table>
    <div style="display:flex;justify-content: space-between;">
      <el-pagination
        layout="prev, pager, next, jumper"
        :total="total"
        :page-size="pageSize"
        :page-sizes="[5]"
        :current-page="currentPage"
        @current-change="handleCurrentPage"
      >
      </el-pagination>
      <el-pagination
        layout="total, sizes"
        :total="total"
        :page-size="pageSize"
        :current-page="currentPage"
        :page-sizes="[5]"
        @current-change="handleCurrentPage"
      >
      </el-pagination>
    </div>
    
  </div>
</template>

<script>
import {formatTime} from "@/utils/utils"

export default {

  data() {
    return {
      loading:false,
      dialogVisible:false,
      noticeForm:{
        id:"",
        title:"",
        description:"",
        detail:"",
        importance:"",
        createdTime:"",
        creater:"admin",
      },
      noticeFormRules:{
        title:[{required:true,message:'主题不能为空',trigger:'blur'}],
        description:[{required:true,message:'简述不能为空',trigger:'blur'}],
        detail:[{required:true,message:'详情不能为空',trigger:'blur'}],
        importance:[{required:true,message:'重要程度还未选择',trigger:'blur'}]
      },
      noticeList:[],
      total:0,
      currentPage:1,
      pageSize:5,
      elTableColumns:[
        {
          prop:"title",
          label:"主题"
        },
        {
          prop:"description",
          label:"简述"
        },
        {
          prop:"detail",
          label:"详情"
        },
        {
          prop:"createdTime",
          label:"创建时间"
        },
        {
          prop:"updateTime",
          label:"更新时间"
        },
        {
          prop:"importance",
          label:"重要程度"
        },
      ],
      
    }
  },
  methods: {
    async getNoticeList(){
      let res = await this.$API.notice.getList(this.currentPage,this.pageSize)

      console.log(res);
      this.total = res.total
      this.noticeList = this.format(res.data)
    },
    format(arr){
      arr.forEach(item=>{
        if(item.updateTime == ""){
          item.updateTime = "暂无数据"
        }

        item.importance === 1 ? item.importance = '重要' : item.importance = '一般'
      })

      return arr
    },
    handleEdit(index,row){
      this.dialogVisible = true
      this.noticeForm = row
    },
    handleDelete(index,row){
      const {_id} = row

      this.$API.notice.deleteById(_id).then(()=>{
        this.getNoticeList()
      })
    },
    // 处理当前页并获取新列表
    handleCurrentPage(currentPage){
      this.currentPage = currentPage
      this.getNoticeList()
    },
    // 新增或编辑通知
    showNoticeDialog(){
      this.dialogVisible = true
    },
    submitNoticeForm(refForm){
      this.$refs[refForm].validate(valid=>{
        this.loading = true

        if(valid){
          if(this.noticeForm.id == ""){
            this.noticeForm.createdTime = formatTime(Date.now())

            // console.log(this.noticeForm);
            this.$API.notice.create(this.noticeForm).then(()=>{
              this.dialogVisible = false
              this.getNoticeList()
            })
          }else{
            console.log("update");
            this.noticeForm.updateTime = formatTime(Date.now())

            // console.log(this.noticeForm);
            let noticeForm = this.noticeForm

            if (noticeForm.importance == "一般") {
              noticeForm.importance = 0
            }else if (
              noticeForm.importance == "重要"
            ){
              noticeForm.importance = 1
            }

            this.$API.notice.update(noticeForm).then(()=>{
              this.dialogVisible = false
              this.getNoticeList()
            })
          }

          this.loading = false
        }else{
          console.log('error submit!!');
          return false;
        }
      })

    },
  },
  created(){
    this.getNoticeList()
  }
}
</script>

<style >
  .el-tooltip__popper {
    max-width: 60%!important; 
    
  }
</style>

<style lang='less' scoped>
  .el-table{
    margin-bottom: 30px;
    .el-button{
      margin: 0 10px;
    }
  }
  .add_button{
    margin-bottom: 15px;
  }
</style>